<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
          <div class="button-group">
            <el-button @click="handleReset" :disabled="isFormSaved">重置</el-button>
            <el-button type="primary" @click="handleSave">保存修改</el-button>
          </div>
        </div>
      </template>
      
      <!-- 用户头像展示区域 -->
      <div class="avatar-display">
        <el-avatar 
          :size="100" 
          :src="avatarUrl" 
          :icon="UserFilled"
        />
        <h3 class="user-name">{{ userForm.userName }}</h3>
      </div>
      
      <el-form :model="userForm" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userForm.userName" disabled />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" type="password" placeholder="请输入新密码" show-password @input="watchFormChanges" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userForm.gender" @change="watchFormChanges">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="userForm.age" :min="0" :max="120" @change="watchFormChanges" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userForm.phone" placeholder="请输入手机号码" @input="watchFormChanges" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email" placeholder="请输入邮箱" @input="watchFormChanges" />
        </el-form-item>
        <el-form-item label="头像">
          <UploadImg @upload-success="watchFormChanges" @upload-remove="watchFormChanges" />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/islogin'
import UploadImg from '@/components/upload/UploadImg.vue'
import { useImageUrlStore } from '@/store/imgUrl'
import { UserFilled } from '@element-plus/icons-vue'
import { StatusType, type userTable } from '@/api/login/userTable'
import { cloneDeep } from 'lodash-es'
import { updateUserApi } from '@/api/login'

const userStore = useUserStore()
const imageUrlStore = useImageUrlStore()

// 用户头像URL，优先使用新上传的头像，如果没有则使用用户原有头像
const avatarUrl = computed(() => {
  return imageUrlStore.getImageUrl || userStore.user?.userImg || ''
})

// 用于存储原始用户数据，用于重置
const originalUserData = ref<userTable | null>(null)
// 控制重置按钮状态
const isFormSaved = ref(true)

const userForm = reactive({
  userId: '',
  userName: '',
  password: '',
  gender: '',
  age: 0,
  phone: '',
  email: '',
  status: StatusType.Allow,
  userImg: ''
})

// 监听表单变化
const watchFormChanges = () => {
  isFormSaved.value = false
}

onMounted(() => {
  if (userStore.user) {
    // 深拷贝原始数据
    originalUserData.value = cloneDeep(userStore.user)
    // 填充表单数据
    Object.assign(userForm, userStore.user)
  }
})

// 重置表单数据
const handleReset = () => {
  if (originalUserData.value) {
    Object.assign(userForm, originalUserData.value)
    // 重置上传组件中的头像（如果有必要）
    if (imageUrlStore.getImageUrl) {
      imageUrlStore.deleteImageUrl()
    }
    ElMessage.info('已重置')
  }
}

const handleSave = async () => {
        userForm.userImg = imageUrlStore.getImageUrl
        const res = await updateUserApi(userForm)
        if(res.code == 200){
            ElMessage.success('保存成功')
            userStore.setUserInfo(userForm)
            ElMessage.success(userStore.user?.userImg)
            imageUrlStore.deleteImageUrl()
        }else{
            ElMessage.error('保存失败')
        }
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.profile-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  display: flex;
  gap: 10px;
}

/* 头像展示区域样式 */
.avatar-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.user-name {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}
</style> 